<template>
  <div class="user">
    <basic-container>
        <avue-crud
          ref="crud"
          :option="option"
          v-model="form"
          :page="page"
          :table-loading="listLoading"
          :data="list"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @search-reset="searchReset"
          @size-change="sizeChange"
          @current-change="currentChange"
          >
          <template slot="menuLeft">




            <!--导出列表主要代码 text表示按钮名字，不是必传，默认‘导出’，filename表示导出文件名称，不是必传，默认‘导出列表’-->
            <export-excel
              text="导出用户"
              :fields="json_fields"
              :fetchList="fetchList"
              filename="用户列表"
              :search="searchForm"
            ></export-excel>
            <!--导出列表主要代码 end-->
            <!--导入列表主要代码 text表示按钮名字，不是必传，默认‘导入’-->
            <import-excel
              text="导入用户"
              :fields="json_fields"
              @upload="uploadExcel"
            ></import-excel>
            <!--导入列表主要代码 end-->

            <!--上传文件-->
            <upload-card title="上传文件"></upload-card>

            <view-img text="图片预览" :list="imgList"></view-img>





          </template>
          <template
            slot="loginname"
            slot-scope="scope">
            <span>{{ scope.row.loginname }}</span>
          </template>
          <template
            slot="role"
            slot-scope="scope">
            <span
              v-for="(role,index) in scope.row.roleList"
              :key="index">
              <el-tag>{{ role.roleName }} </el-tag>&nbsp;&nbsp;
            </span>
          </template>
          <template
            slot="deptId"
            slot-scope="scope">
            {{ scope.row.deptName }}
          </template>
          <template
            slot="lockFlag"
            slot-scope="scope">
            <el-tag>{{ scope.label }}</el-tag>
          </template>
          <template
            slot="deptIdForm"
            slot-scope="scope">
            <avue-input
              v-model="form.deptId"
              :node-click="getNodeData"
              :dic="treeDeptData"
              :props="defaultProps"
              type="tree"
              placeholder="请选择所属部门"/>
          </template>
          <template
            slot="roleForm"
            slot-scope="scope">
            <avue-select
              v-model="role"
              :dic="rolesOptions"
              :props="roleProps"
              multiple
              placeholder="请选择角色"/>
          </template>
        </avue-crud>

    </basic-container>
  </div>

</template>

<script>
  import {addObj, delObj, fetchList, putObj} from '@/api/admin/user'
  import {deptRoleList} from '@/api/admin/role'
  import {fetchTree} from '@/api/admin/dept'
  import {tableOption} from '@/const/crud/admin/user'
  import {mapGetters} from 'vuex'
  import uploadCard from './upload'

  import { remote } from '@/api/admin/dict';

  /**
   * 导入导出功能所需组件
   * **/
  import exportExcel from '@/components/export'
  import importExcel from '@/components/import'
  /**
   * 导入导出功能所需组件 end
   * **/

  //图片预览组件
  import viewImg from '@/components/preview'

  export default {
    name: 'SysUser',
    components:{exportExcel,importExcel,uploadCard,viewImg},
    data() {
      return {
        /**
         * 导入导出功能所需数据
         * **/
        fetchList,
        //需要导入或导出的字段
        json_fields:{
          'loginname': '登录名',
          'username': '用户名',
          'phone': '手机号'
        },

        publicPath: process.env.BASE_URL,
        imgList: [],



        /**---------------------------------------------------------------------------------------------------------
         * 以下是列表操作基本数据，和导入导出功能无关
         * **/
        searchForm: {},
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            label: 'name',
            value: 'id'
          }
        },
        treeData: [],
        option: tableOption,
        treeDeptData: [],
        checkedKeys: [],
        roleProps: {
          label: 'roleName',
          value: 'roleId'
        },
        defaultProps: {
          label: 'name',
          value: 'id'
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20, // 每页显示多少条,
          isAsc: false// 是否倒序
        },
        list: [],
        listLoading: true,
        role: [],
        form: {},
        rolesOptions: [],
        /**---------------------------------------------------------------------------------------------------------
         * 以上是列表操作基本数据，和导入导出功能无关 end
         * **/





      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    watch: {
      role() {
        this.form.role = this.role
      }
    },
    created() {
      this.init()

      this.imgList = [
        {
          w: 800,
          h: 600,
          src: this.publicPath + 'img/bg/cloud.jpg',
          msrc: this.publicPath + 'img/bg/cloud.jpg',
        },
        {
          w: 800,
          h: 600,
          src: this.publicPath + 'img/bg/login.png',
          msrc: this.publicPath + 'img/bg/login.png',
        },
        {
          w: 800,
          h: 600,
          src: this.publicPath + 'img/bg/star-squashed.jpg',
          msrc: this.publicPath + 'img/bg/star-squashed.jpg',
        },
        {
          w: 800,
          h: 600,
          src: this.publicPath + 'img/bg/cloud.jpg',
          msrc: this.publicPath + 'img/bg/cloud.jpg',
        },
        {
          w: 800,
          h: 600,
          src: this.publicPath + 'img/bg/star-squashed.jpg',
          msrc: this.publicPath + 'img/bg/star-squashed.jpg',
        },
      ]
    },
    methods: {

      /**
       * 导入excel后数据处理
       * **/
      uploadExcel(list){
        console.log('list',list)
        const loading = this.$loading({
          lock: true,
          text: '正在导入数据',
          background: 'rgba(255, 255, 255, 0.6)'
        });
        //后端提供借口 提交list 后端处理list到数据库，根据需求做出上传数据是否合理的判断并返回结果，例如手机号是否已存在。
        //XXXXXXX().then((res) => { //上传接口
        setTimeout(() => { //添加上传接口后，删掉setTimeout
          this.$message.success('导入成功')
          loading.close()
          this.getList(this.page) //上传成功后刷新列表数据
        }, 1000)
        // }).catch((err) =>{  错误处理  })
      },
      /**
       * 导入excel后数据处理 end
       * **/





      /**---------------------------------------------------------------------------------------------------------
       * 以下是列表操作基本代码，和导入导出功能无关
       * **/

      init() {
        fetchTree().then(response => {
          this.treeData = response.data.data
        })
      },
      nodeClick(data) {
        this.page.page = 1
        this.getList(this.page, {deptId: data.id})
      },
      getList(page, params) {
        this.listLoading = true
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          this.list = response.data.data.records
          this.page.total = response.data.data.total
          this.listLoading = false
        })
      },
      searchChange(param,done) {
        this.searchForm = param
        this.page.currentPage = 1
        this.getList(this.page, param)
        done()
      },
      searchReset() {
        this.searchForm = {}
        this.page.currentPage = 1
        this.getList(this.page)
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      refreshChange() {
        this.getList(this.page)
      },
      /**---------------------------------------------------------------------------------------------------------
       * 以上是列表操作基本代码，和导入导出功能无关 end
       * **/

    }
  }
</script>
<style lang="scss">
  .user {
    height: 100%;

    &__tree {
      padding-top: 3px;
      padding-right: 20px;
    }

    &__main {
      .el-card__body {
        padding-top: 0;
      }
    }
  }
</style>

